<template>
	<view class="content">
		<view class="goodsDetail">
			<u-swiper :list="goods.imageUrl" interval="1000" height="600rpx" :indicator="indicator" :autoplay="autoplay"
				:circular="circular">
			</u-swiper>
			<u-row justify="space-between" gutter="12" customStyle="line-height: 50rpx;padding: 20rpx;">
				<u-col span="6" style="text-align: center;">
					<view class="flex">
						<u--text :text="goods.name" bold size="22"></u--text>
						<!-- <u-tag :text="goods.post?'包邮':'自费'" size="mini" type="warning"></u-tag> -->
					</view>
				</u-col>
				<u-col span="4" style="text-align: center;">
				</u-col>
				<u-col span="2" style="text-align: right;">
					<u--text text="销量:0" size="mini"></u--text>
				</u-col>
			</u-row>
			<u-row justify="space-between" gutter="12" customStyle="line-height: 50rpx;padding: 20rpx;">
				<u-col span="4">
					<view class="flex">
						<u--text mode="price" text="123.00" color="#ff0000" bold size="22"></u--text>
						<u--text text="起" color="#ff0000"></u--text>
					</view>
				</u-col>
				<u-col span="8" style="text-align: right;">
					<view class="flex">
						<u-tag :text="'出厂价￥' +goods.lowest" plain size="mini" type="warning"></u-tag>
						<u-tag :text="'最低' +goods.lowest+'件起购'" plain size="mini" type="warning"></u-tag>
					</view>
				</u-col>
			</u-row>
			<u-gap height="2" bgColor="#bbb"></u-gap>
			<u-row justify="space-between" gutter="12" customStyle="line-height: 40rpx;padding: 10rpx 20rpx;">
				<u-col span="2">
					<u--text text="包邮" color="#000000" bold></u--text>
				</u-col>
				<u-col span="10">
					<u--text text="国内包邮,偏远地区除外,详情请咨询商家" color="#6d6d6d"></u--text>
				</u-col>
			</u-row>
			<u-gap height="1" bgColor="#bbb"></u-gap>
			<u-row justify="space-between" gutter="12" customStyle="line-height: 40rpx;padding: 10rpx 20rpx;">
				<u-col span="2">
					<u--text text="规格" color="#000000" bold></u--text>
				</u-col>
				<u-col span="9">

					<u--text text="商品规格" color="#6d6d6d"></u--text>
				</u-col>
				<u-col span="1">
					<u-icon name="arrow-right"></u-icon>
				</u-col>
			</u-row>
			<u-gap height="2" bgColor="#bbb"></u-gap>
			<u-row justify="space-between" gutter="12" customStyle="line-height: 40rpx;padding: 10rpx 20rpx;">
				<u-col span="2">
					<u--text text="评论0" color="#000000" bold></u--text>
				</u-col>
				<u-col span="10">
					<u--text text="查看更多" color="#6d6d6d" align="right" suffixIcon="arrow-right"></u--text>
				</u-col>
			</u-row>
			<u--text text="暂无评论" color="#000000" bold align="center"></u--text>
			<u-gap height="2" bgColor="#bbb"></u-gap>
			<view class="shop">
				<u-row justify="space-between" gutter="12" customStyle="line-height: 40rpx;padding: 10rpx;">
					<u-col span="2">
						<u--image :src="src" width="40px" height="40px" shape="circle"></u--image>
					</u-col>
					<u-col span="7">
						<u--text text="店铺名称" color="#6d6d6d"></u--text>
					</u-col>
					<u-col span="3">
						<u-button text="进店逛逛" shape="circle" size="mini"
							color="linear-gradient(to right, rgb(247, 240, 35), rgb(248, 25, 58))"></u-button>

					</u-col>
				</u-row>
				<u-scroll-list :indicator="false">
					<view class="shopGoods" v-for="(item, index) in shopGoodsList" :key="index">
						<u-image :src="item.imageUrl[0]" width="200rpx" height="200rpx"></u-image>
						<u--text :text="item.name" bold></u--text>
						<view class="flex">
							<u--text mode="price" decoration="line-through" :text="item.priceHis"></u--text>
							<u-tag :text="item.post?'包邮':'自费'" plain size="mini" type="warning"></u-tag>
						</view>
						<u--text mode="price" color="#ff0000" bold align="left" :text="item.priceNew"></u--text>
					</view>

				</u-scroll-list>
			</view>
			<u-gap height="5" bgColor="#bbb"></u-gap>
			<view class="describe">
				<u-image :src="item" v-for="(item,index) in describeList" width="100%"></u-image>
			</view>
		</view>
		<u-back-top :scroll-top="scrollTop" icon="arrow-up"></u-back-top>
		<view class="operate">
			<u-row justify="space-between" gutter="12" customStyle="line-height: 40rpx;padding: 20rpx;">
				<u-col span="2">
					<u-icon name="https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/pageB/shop.png" label="店铺" labelSize="10rpx" labelPos="bottom"
						color="#000" bold></u-icon>
				</u-col>
				<u-col span="2">
					<u-icon name="https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/pageB/cart.png" label="购物车" labelSize="10rpx" labelPos="bottom" color="#000"
						bold></u-icon>
				</u-col>
				<u-col span="4">
					<u-button text="加入购物车" shape="circle"
						color="linear-gradient(to right, rgb(247, 240, 35), rgb(39, 24, 248))"></u-button>
				</u-col>
				<u-col span="4">
					<u-button text="立即购买" shape="circle"
						color="linear-gradient(to right, rgb(255, 0, 0), rgb(39, 43, 247))"></u-button>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onUnload,
		onPageScroll
	} from "@dcloudio/uni-app";
	import {
		ref
	} from "vue";
	const indicator = ref(true)
	const autoplay = ref(true)
	const circular = ref(true)
	const goods = ref({
		imageUrl: ["https://cdn.uviewui.com/uview/album/1.jpg", "https://cdn.uviewui.com/uview/album/1.jpg"],
		name: '商品名称',
		describe: '描述描述描述描述描述描述描述描述',
		priceNew: 123.00,
		priceHis: 234.99,
		lowest: 1000,
		tallest: 100000,
		post: 1
	})
	const shopGoodsList = ref([{
		imageUrl: ["https://cdn.uviewui.com/uview/album/1.jpg", "https://cdn.uviewui.com/uview/album/1.jpg"],
		name: '商品名称',
		describe: '描述描述描述描述描述描述描述描述',
		priceNew: 123.00,
		priceHis: 234.99,
		lowest: 1000,
		tallest: 100000,
		post: 1
	}, {
		imageUrl: ["https://cdn.uviewui.com/uview/album/1.jpg", "https://cdn.uviewui.com/uview/album/1.jpg"],
		name: '商品名称',
		describe: '描述描述描述描述描述描述描述描述',
		priceNew: 123.00,
		priceHis: 234.99,
		lowest: 1000,
		tallest: 100000,
		post: 1
	}, {
		imageUrl: ["https://cdn.uviewui.com/uview/album/1.jpg", "https://cdn.uviewui.com/uview/album/1.jpg"],
		name: '商品名称',
		describe: '描述描述描述描述描述描述描述描述',
		priceNew: 123.00,
		priceHis: 234.99,
		lowest: 1000,
		tallest: 100000,
		post: 1
	}])
	const scrollTop = ref(0)
	const describeList = ref(["https://cdn.uviewui.com/uview/album/1.jpg",
		"https://cdn.uviewui.com/uview/album/1.jpg", "https://cdn.uviewui.com/uview/album/1.jpg",
		"https://cdn.uviewui.com/uview/album/1.jpg", "https://cdn.uviewui.com/uview/album/1.jpg",
		"https://cdn.uviewui.com/uview/album/1.jpg"
	])
	onLoad((options) => {
		console.log("123--", options)
	})
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop
		console.log("滚动距离---", e);
	})
</script>

<style scoped lang="scss">
	.content {
		// width: 100%;
		padding: 0;
	}

	.shop {
		padding: 20rpx;

		.shopGoods {
			margin: 20rpx 20rpx 0 0;

		}
	}

	.describe {
		padding-bottom: 100rpx;
	}

	.operate {
		width: 100%;
		position: fixed;
		bottom: 0;
		background-color: #fff;
	}

	.flex {
		display: flex;
	}
</style>